<template>
  <table
    class="m-table"
    border="1"
    cellpadding="0"
    cellspacing="0"
    style="width:1100px;border:none; text-align:center;margin:0 auto "
  >
    <tr>
      <td colspan="9">
        <p class="title">
          {{ h1 }}
        </p>
      </td>
    </tr>
    <!-- <tr> 暂时不要了，先注释掉，防止后续需要
      <td colspan="2">工程部位</td>
      <td colspan="7">
        <span v-if="!editing" @dblclick="edit">{{ gcbw }}</span>
        <input
          style="width:50%;border:none"
          type="text"
          class="form-control"
          v-if="editing"
          v-model="gcbw"
          ref="input"
          @blur="save"
        />
      </td>
    </tr> -->
    <tr>
      <td>分项工程名称:</td>
      <td colspan="2">{{ fxgcName }}</td>
      <td>分项工程编号:</td>
      <td colspan="2">{{ fxgcNum }}</td>
      <td>施工单位:</td>
      <td colspan="2">{{ sgCompany }}</td>
    </tr>
    <tr>
      <td>项目名称:</td>
      <td colspan="2">{{ ssjsProject }}</td>
      <td>分部工程名称:</td>
      <td colspan="2">{{ ssfbName }}</td>
      <td>单位工程名称:</td>
      <td colspan="2">{{ ssdwName }}</td>
    </tr>
    <tr style="height:100px"  class="content-text">
        <td>基本要求:</td>
        <td colspan="9">
            <Input
            :rows="5"
            @on-blur="changeRequest(jiben_yaoqiu)"
            type="textarea"
              v-model="jiben_yaoqiu"
              placeholder="请填写基本要求"
            ></Input>
        </td>
      </tr>
  </table>
</template>

<script>
import apiObj from '@/api/manage-construction.js';

export default {
  name: 'table-header-pd',
  props: {
    h1: {
      type: String,
      required: true
    },
    gcbw: {
      type: String,
      required: true
    },
    fxgcName: {
      type: String,
      required: true
    },
    fxgcNum: {
      type: String,
      required: true
    },
    sgCompany: {
      type: String,
      required: true
    },
    ssjsProject: {
      type: String,
      required: true
    },
    ssfbName: {
      type: String,
      required: true
    },
    ssdwName: {
      type: String,
      required: true
    },
    nodeId: {
      type: Number,
      required: true
    },
    reportId: {
      type: Number,
      required: true
    },
    myReruqest: String
  },
  data () {
    return {
      editing: false,
      jiben_yaoqiu: this.myReruqest
    };
  },
  watch: {
    myReruqest (newV, oldV) {
      this.jiben_yaoqiu = newV;
    }
  },
  methods: {
    edit () {
      this.editing = true;
      this.$nextTick(function () {
        console.log('$refs', this.$refs);
        this.$refs.input.focus();
      });
    },
    async save () {
      this.editing = false;
      console.log('gcbw', this.gcbw);
      const send = {
        nodeId: this.nodeId,
        reportId: this.reportId,
        gcbw: this.gcbw
      };
      try {
        const resp = await apiObj.editTableHead(send);
        console.log('resp', resp);
      } catch (error) {}
    },
    changeRequest (value) {
      this.$emit('changeRequest', value);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";
/deep/ .ivu-input{
  border:none;
  &:focus{
  outline:none;
   box-shadow: none;
  }
}
</style>
